import React, { useState } from 'react';
import { Cascader, DatePicker, Form, Input, message, Modal, Select } from 'antd';
import moment from 'moment';
import useOptions from '../hooks/useOptions';
import { createUndefined, retrievalKeyword } from '@/services/userFeedback/logRetrieval';

const addTaskModal: React.FC<any> = ({ open, onSubmit, onCancel }) => {
  const [form] = Form.useForm();
  const { brand, series, version, onChange, filter } = useOptions(form);
  const [loading, setLoading] = useState(false);

  const handleCancel = () => {
    form.resetFields();
    onCancel();
  };

  const onFinish = async () => {
    form.validateFields().then(async values => {
      setLoading(true);
      const retrieval = await retrievalKeyword(values.keyWord);

      if (retrieval.statusCode !== '0') {
        setLoading(false);
        message.error(retrieval.statusMessage);
        return;
      }
      if (retrieval.data === 1) {
        setLoading(false);
        message.error('请输入未定义关键字');
        return;
      }

      const query: any = { ...values, logType: values.logType || 0, keyword: values.keyWord };
      if (query.vehicleType) {
        const [typeName, vehicleType] = query.vehicleType;
        query.typeName = typeName;
        query.vehicleType = vehicleType;
      }
      if (query.brandCode) {
        const brandName = brand.find((item: any) => item.brandCode === query.brandCode)?.brandName;
        query.brandName = brandName;
      }
      delete query.keyWord;
      createUndefined(query).then(res => {
        if (res.statusCode === '0') {
          handleCancel();
          onSubmit();
        }
        setLoading(false);
      });
    });
  };

  return (
    <Modal
      title="创建任务"
      open={open}
      onOk={onFinish}
      onCancel={handleCancel}
      confirmLoading={loading}
      keyboard={false}
      maskClosable={false}
    >
      <Form form={form} labelCol={{ span: 4 }}>
        <Form.Item
          label="关键字"
          name="keyWord"
          validateTrigger="onBlur"
          rules={[{ required: true, message: '请输入关键字' }]}
        >
          <Input placeholder="请输入未定义关键字" allowClear />
        </Form.Item>
        <Form.Item
          label="VIN码"
          name="vin"
          rules={[
            {
              pattern: /^[A-Za-z0-9]{17}$/,
              message: '请输入17位数字字母',
            },
          ]}
        >
          <Input maxLength={17} placeholder="请输入VIN码" allowClear />
        </Form.Item>
        <Form.Item label="版本" name="version">
          <Select showSearch allowClear placeholder="请选择版本">
            {version?.map((item: any) => (
              <Select.Option key={item} value={item}>
                {item}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item label="日志类型" name="logType">
          <Select showSearch allowClear placeholder="请选择日志类型">
            {['异常日志', '全量日志']?.map((item: string, index) => (
              <Select.Option key={item} value={index + 1}>
                {item}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item label="品牌" name="brandCode">
          <Select onChange={onChange} showSearch allowClear placeholder="请选择品牌">
            {brand?.map((item: any) => (
              <Select.Option key={item.brandCode} value={item.brandCode}>
                {item.brandName}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item label="车型" name="vehicleType">
          <Cascader showSearch={{ filter }} options={series} placeholder="请选择车型" />
        </Form.Item>
        <Form.Item label="上传日期" name="rangeTime">
          <DatePicker.RangePicker
            format="YYYY-MM-DD"
            disabledDate={current =>
              current && (current < moment().subtract(30, 'days') || current > moment())
            }
          />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default addTaskModal;
